class Tab {
    constructor(selector) {
        this.main = document.querySelector(selector);
        this.lis = this.main.getElementsByTagName('li')
        this.cons = this.main.getElementsByTagName('section');
        this.rmBtns = this.main.getElementsByClassName('icon-guanbi')
        this.ul = this.main.querySelector('ul')
        this.consBox = this.main.querySelector('.tabscon')
        this.addBtn = this.main.querySelector('.tabadd span')
        this.init()
    }
    updateNode() {
        this.span = this.main.querySelectorAll('.fisrstnav li span:first-child')
        this.section = this.main.querySelectorAll('.tabscon section')
    }
    init() {
        this.updateNode()
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].index = i;
            this.lis[i].onclick = this.toggle.bind(this.lis[i], this);
            this.rmBtns[i].onclick = this.toggle.bind(this.rmBtns[i], this);
            this.span[i].ondblclick = this.edit
            this.section[i].onclick = this.xedit
        }
        this.addBtn.onclick = this.add.bind(this.addBtn, this);
    }
    clearClass() {
        for (var i = 0; i < this.lis.length; i++) {
            //tab 里面的li 删除类名
            this.lis[i].className = ''
            //tab里面的cons 删除类名
            this.cons[i].className = ''
        }
    }
    // 切换
    toggle(that) {
        that.clearClass()
        this.className = 'liactive'
        that.cons[this.index].className = 'conactive'
    }
    add(that) {
        var tmp = Math.random().toFixed(3)
        var li = `<li class="liactive">
        <span>新li${tmp}</span><span class="iconfont icon-guanbi"></span>
      </li>`
        var section = `<section class="conactive">${tmp}</section>`
        that.clearClass()
        that.ul.insertAdjacentHTML('beforeend', li)
        that.consBox.insertAdjacentHTML('beforeend', section)
        this.init()
    }
    del(that, e) {
        e.stopPropagation();
        var index = this.parentNode.index
        this.lis[index].remove();
        this.cons[index].remove();
        that.init()
        if (document.querySelector('.liactive')) return
        index--
        that.lis[index] && that.lis[index].click();
    }
    edit() {
        var str = this.innerHTML
        window.getSelection ? window.getSelection().removeAllRanges() : document.section.empty();
        this.innerHTML = '<input type="text" />'
        var input = this.children[0]
        input.value = srt
        input.onblur = function () {
            if (this.value !== '') {
                this.parentNode.innerHTML = this.value;
            } else {
                this.parentNode.innerHTML = str;
            }
        }
        input.onkeyup = function (e) {
            if (e.keyCode === 13) {
                this.blur();
            }
        }
    }
    xedit() {
        var str = this.innerHTML
        window.getSelection ? window.getSelection().removeAllRanges() : document.section.empty();
        this.innerHTML = '<input type="text" />'
        var input = this.children[0]
        input.value = str
        input.select()
        input.onblur = function () {
            if (input.value != '') {
                this.parentNode.innerHTML = this.value;
            } else {
                this.parentNode.innerHTML = str
            }
        }
        input.onkeyup = function (e) {
            if (e.keyCode === 13) {
                this.blur();
            }
        }
    }
}
new Tab('#tab');